<template>
  <div class="user-manage-container">
    <el-card class="user-manage-card">
      <!-- 搜索和操作区域 -->
      <div class="table-container" style="text-align: center;width: 100%;display: flex">
        <div class="table-container" style="text-align: left;padding: 20px 20px;flex: 1">
        <el-input
          v-model="searchQuery"
          placeholder="请输入用户名或角色进行搜索"
          clearable
          class="search-input"
          @input="handleSearch"
          style="padding: 0px 30px 0;width: 70%"
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>

        <div class="table-container" style="text-align: right;padding: 20px 30px;flex: 1">
          <el-button type="primary" @click="handleAddUser">新增用户</el-button>
          <el-button type="success" @click="handleEnableUsers">启用</el-button>
          <el-button type="warning" @click="handleDisableUsers">禁用</el-button>
        </div>
      </div>


      <!-- 用户表格 -->
      <el-table :header-cell-style="{ 'with': '100%' }" :data="filteredUserList" class="custom-table" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="username" label="用户名" width="180"></el-table-column>
        <el-table-column prop="roles[0].name" label="角色" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
              {{ scope.row.status === 'active' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button type="primary" size="small" class="action-btn" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="info" size="small" class="action-btn" @click="handleViewDetails(scope.row)">详情</el-button>
            <el-button type="success" size="small" class="action-btn" @click="handleSendMessage(scope.row)">发消息</el-button>
            <el-button type="danger" size="small" class="action-btn" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

<!--      分页-->
      <div class="block">

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>

    </el-card>

    <!-- 用户详情弹框 -->
    <el-dialog v-model="detailDialogVisible" title="用户详情" width="30%" :before-close="handleCloseDetailDialog">
      <div v-if="selectedUser">
        <p><strong>用户名:</strong> {{ selectedUser.username }}</p>
        <p><strong>角色:</strong> {{ selectedUser.roles[0].name }}</p>
        <p><strong>状态:</strong> <el-tag :type="selectedUser.status === 'active' ? 'success' : 'danger'">{{ selectedUser.status === 'active' ? '启用' : '禁用' }}</el-tag></p>
      </div>
    </el-dialog>

    <!-- 发送消息弹框 -->
    <el-dialog v-model="messageDialogVisible" title="发送消息" width="30%" :before-close="handleCloseMessageDialog">
      <el-input v-model="messageContent" type="textarea" placeholder="请输入消息内容" rows="4"></el-input>
      <template #footer>
        <el-button @click="handleCloseMessageDialog">取消</el-button>
        <el-button type="primary" @click="handleSendMessageConfirm">发送</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      userList: [
        { id: "1", username: "admin11", roles: [{ name: "USER" }], status: 'active' },
        { id: "1885222645091831810", username: "admin1", roles: [{ name: "USER" }], status: 'inactive' }
      ],
      selectedUsers: [],
      detailDialogVisible: false,
      messageDialogVisible: false,
      selectedUser: null,
      messageContent: '',
      //分页参数
      currentPage4: 1
    };
  },
  computed: {
    filteredUserList() {
      return this.userList.filter(user => {
        return user.username.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
               user.roles[0].name.toLowerCase().includes(this.searchQuery.toLowerCase());
      });
    }
  },
  methods: {
    handleAddUser() {
      console.log('新增用户');
    },
    handleEnableUsers() {
      this.selectedUsers.forEach(user => user.status = 'active');
    },
    handleDisableUsers() {
      this.selectedUsers.forEach(user => user.status = 'inactive');
    },
    handleSelectionChange(selection) {
      this.selectedUsers = selection;
    },
    handleEdit(user) {
      console.log('编辑用户', user);
    },
    handleViewDetails(user) {
      this.selectedUser = user;
      this.detailDialogVisible = true;
    },
    handleSendMessage(user) {
      this.selectedUser = user;
      this.messageDialogVisible = true;
    },
    handleDelete(user) {
      console.log('删除用户', user);
    },
    handleSearch() {
      // 搜索逻辑已在 computed 中实现
    },
    handleCloseDetailDialog() {
      this.detailDialogVisible = false;
    },
    handleCloseMessageDialog() {
      this.messageDialogVisible = false;
      this.messageContent = '';
    },
    handleSendMessageConfirm() {
      console.log('发送消息给', this.selectedUser.username, '内容:', this.messageContent);
      this.handleCloseMessageDialog();
    },
    //分页方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }


  }
};
</script>

<style scoped>
.user-manage-container {
  padding: 40px;
  background-color: #f8f9fa;
}

.user-manage-card {
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: none;
}

.search-and-action {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.custom-table {
  margin-top: 24px;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 600px;
}

.custom-table >>> el-table__header el-table__body{
  width: 100%;
}


.action-btn {
  margin-right: 8px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 8px 16px;
}

.search-input {
  width: 300px;
}

::v-deep .el-table__header-wrapper table{
  width: 100% !important;
}

::v-deep .el-table__body-wrapper table{
  width: 100% !important;
}

</style>
